<template>
  <div>
    <el-card>
      <strong>预约信息</strong>
      <el-divider></el-divider>
      <!--      搜索栏-->
      <el-row type="flex" gutter="20">
        <el-col :span="6"><el-input placeholder="请输入预约号以查询预约信息" v-model="reservationId"></el-input></el-col>
        <el-col :span="18"><el-button type="primary" @click="SearchOrder">搜索</el-button></el-col>
      </el-row>
      <el-divider></el-divider>
      <el-dialog :visible.sync="dialogVisible">
        <el-descriptions title="预约明细" direction="vertical" :column="3" border>
          <el-descriptions-item label="预约号">{{ ReservationForm.reservationId }}</el-descriptions-item>
          <el-descriptions-item label="用户名">{{username}}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{phone }}</el-descriptions-item>
          <el-descriptions-item label="预约类型" v-if="ReservationForm.visitingDetailId !== null">医疗</el-descriptions-item>
          <el-descriptions-item label="预约类型" v-else>绿化基地</el-descriptions-item>
          <el-descriptions-item label="预约时间"></el-descriptions-item>
          <el-descriptions-item label="预约名称">{{ name }}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>
      <!--预约明细-->
      <el-card class="inner">
        <el-descriptions title="预约明细" direction="vertical" :column="3" border>
          <el-descriptions-item label="预约号">{{ ReservationForm.reservationId }}</el-descriptions-item>
          <el-descriptions-item label="用户名">{{username}}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{phone }}</el-descriptions-item>
          <el-descriptions-item label="预约类型" v-if="ReservationForm.visitingDetailId !== null">医疗</el-descriptions-item>
          <el-descriptions-item label="预约类型" v-else>绿化基地</el-descriptions-item>
          <el-descriptions-item label="预约时间"></el-descriptions-item>
          <el-descriptions-item label="预约名称">{{ name }}</el-descriptions-item>
        </el-descriptions>
        <el-pagination
          :page-size="queryInfo.pagesize"
          :pager-count="7"
          layout="prev, pager, next"
          :total="queryInfo.total"
          style="margin-left: 30%;margin-top: 10px">
        </el-pagination>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import {
  FindUserByAccount,
  searchVisitById,
  searchMedicalById,
  userGetReservationInfo,
  searchReservationById
} from "@/api";

export default {
  name: "AppointContent",
  data(){
    return{
      radio1:1,
      radio2:1,
      time:new Date(),
      queryInfo:{
        pagenum:1,
        pagesize: 1,
        total:0
      },
      reservationId:'',
      dialogVisible:false,
      ReservationForm:{
        reservationId:'',
        account:'',
        medicalDetailId:'',
        visitingDetailId:'',
      },
      username:'',
      phone:'',
      name:''
    }
  },
  methods:{
    getInfo(){
      FindUserByAccount(this.ReservationForm.account).then(res=>{
        this.username=res.data[0].userName
        this.phone=res.data[0].phone
      })
      if(this.ReservationForm.medicalDetailId===null){
        searchVisitById({

        }).then(res=>{

        })
      }
      else if(this.ReservationForm.visitingDetailId===null){
        searchMedicalById({

        }).then(res=>{


        })
      }
    },
    async NewPage(){
      userGetReservationInfo({
        "pageNum":this.queryInfo.pagenum,
        "pageSize":this.queryInfo.pagesize
      }).then(res =>{
        // console.log(res.data.data[0])
        this.queryInfo.total=res.data.dataSum
        this.ReservationForm=res.data.data[0]
        this.getInfo()
      })
    },
    handleCurrentChange(newPage){
      this.queryInfo.pagenum = newPage
      this.NewPage()
    },
    SearchOrder(){
      searchReservationById({ "reservationsId":this.reservationId}).then(res=>{
        this.ReservationForm.reservationId=res.data[0].reservationsId
        this.ReservationForm.medicalDetailId = res.data[0].medicalId
        this.ReservationForm.visitingDetailId = res.data[0].visitingId
        // console.log(res.data)
      })
      this.getInfo()
    }
  },
  mounted() {
    this.NewPage()
  }
}
</script>

<style scoped>
.el-card{
  margin: 20px 100px 20px 100px
}
.el-divider{
  margin-bottom: 15px;
  margin-top: 15px;
}
.inner{
  margin: 0;
}
</style>
